<!-- 基础表格组件 -->
<template>
  <div
    class="baseList category-group"
    v-show="pagination?.total > 0 || !isSearch"
  >
    <div class="category-header">
      <div class="ch-title">{{ categoryName }}（{{ pagination?.total }}）</div>
      <div class="ch-ops">
        <button
          size="small"
          class="button-small"
          style="margin-left: 30px"
          @click="handlerCreateProcess('')"
        >
          <t-icon name="add-circle" style="color: #fff" /><span
            style="color: #fff"
            >创建表单</span
          >
        </button>
        <t-button
          theme="default"
          size="small"
          variant="text"
          class="button"
          @click="handleDeleteProcessCategory"
        >
          <t-icon name="close" style="color: #191919" /><span>删除</span>
        </t-button>
        <t-button
          theme="default"
          size="small"
          variant="text"
          class="button"
          @click="handleUpdateProcessCategory"
        >
          <t-icon name="edit" style="color: #191919" /><span>重命名</span>
        </t-button>
      </div>
    </div>
    <div class="tableBoxs" style="margin: 0px">
      <t-table
        :data="listData"
        :columns="COLUMNS"
        :row-key="rowKey"
        vertical-align="middle"
        :hover="true"
        :show-header="false"
        :pagination="pagination"
        :disable-data-page="pagination.total <= 10"
        :loading="dataLoading"
        :filter-value="filterValue"
        :hide-sort-tips="true"
        :show-sort-column-bg-color="true"
        table-layout="auto"
        @filter-change="FilterChange"
        @sort-change="sortChange"
      >
        <!-- 图标 -->
        <template #icon="{ row }">
          <img
            v-if="row.icon"
            :src="row.icon"
            style="width: 36px; height: 36px"
          />
          <div class="icon" v-else>
            <t-icon name="server" size="20px" style="margin-top: 6px"></t-icon>
          </div>
        </template>
        <!-- end -->
        <!-- 更新时间-->
        <template #updateTime="{ row }">
          <div class="updateTime">
            <span>{{ row.updateTime }}</span>
          </div>
        </template>
        <!-- end -->
        <!-- 在操作栏添加删除、编辑、查看三种操作 -->
        <template #op="{ row }">
          <div style="text-align: right; float: right; margin-right: 5px">
            <a class="btn-dl btn-split-right" @click="handleClickDelete(row)"
              >删除</a
            >
            <a class="font-bt btn-split-right" @click="handlerToData(row.id)">
              数据</a
            >
            <a class="font-bt" @click="handlerCreateProcess(row.id)"> 编辑</a>
          </div>
        </template>
        <!-- end -->
      </t-table>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ListBase'
}
</script>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
// import { isNumber } from 'lodash'
import { random } from 'lodash'
import { COLUMNS } from '../constants'
import { getSystemUserList } from '@/api/systemuser'
import { getProcessList } from '@/api/process'
import { getFormList } from '@/api/form' // 表格列

const props = defineProps({
  categoryName: {
    type: String,
    default: () => {
      return ''
    }
  },
  isSearch: {
    type: Boolean,
    default: () => {
      return false
    }
  },
  appId: {
    type: String,
    default: () => {
      return ''
    }
  },
  categoryId: {
    type: Number,
    default: () => {
      return undefined
    }
  },
  queryKeyword: {
    type: String,
    default: () => {
      return ''
    }
  }
})
watch(
  () => props.queryKeyword,
  (val) => {
    fetchData()
  }
)
const listData = ref([]) // 列表数据
// 获取列表数据
const fetchData = async () => {
  dataLoading.value = true
  try {
    const params = {
      id: 'FORM_MODEL_LIST',
      palyload: {
        userAppId: props.appId,
        category: props.categoryId,
        name: props.queryKeyword
      }
    }
    const res: any = await getFormList(params)
    listData.value = res.data.result.data
    pagination.value.total = res.data.result.total
  } finally {
    dataLoading.value = false
  }
}
const handlerToData = (id) => {
  router.push({ name: 'formData', query: { id, appId: props.appId } })
}

const handlerCreateProcess = (id) => {
  router.push({ path: 'design', query: { id, appId: props.appId } })
  // const params = { categoryId: props.categoryId, tenantId: props.appId }
  // if (id) {
  //   params.id = id
  // }
  // const queryString = new URLSearchParams(params).toString()
  // const routeUrl = '/#/flowBis/edit'
  // window.open(`${routeUrl}?${queryString}`, '_blank')
  // window.open('/#/flow/index', '_target')
}

onMounted(() => {
  fetchData()
})
const emit = defineEmits([
  'fetchData',
  'handleSetupContract',
  'handleClickStatus',
  'handleResetPassword',
  'handleBulid',
  'handleClickDelete',
  'handleUpdateProcessCategory',
  'handleDeleteProcessCategory'
])
const router = useRouter()

// 表格数据
const data: any = ref([])
// 分页
const pagination: any = ref({
  pageSize: 10,
  total: 0,
  current: 1 // 默认当前页
})
// 行的key
const rowKey = 'index'
const filterValue = ref({
  status: ''
}) // 过滤
// 加载状态
const dataLoading = ref(true)

// 排序
const sortChange = (val) => {
  // 调用onFilterChange方法进行排序
  onFilterChange(val)
}
// 模拟异步请求进行排序
const onFilterChange = (val) => {
  emit('fetchData', val)
}
// 筛选
const FilterChange = (val) => {
  ONFilterChange(val)
}
// 模拟异步请求进行筛选
const ONFilterChange = (val) => {
  emit('fetchData', val)
}

// 打开编辑弹窗
const handleSetupContract = (val) => {
  emit('handleSetupContract', val)
}
const handleClickStatus = (val, status) => {
  emit('handleClickStatus', val, status)
}
const handleUpdateProcessCategory = () => {
  emit('handleUpdateProcessCategory', props)
}
const handleDeleteProcessCategory = () => {
  emit('handleDeleteProcessCategory', props.categoryId)
}
// 点击删除
const deleteIdx = ref(-1) // 删除的索引
const callback = () => {
  fetchData()
}
const handleClickDelete = (row: { rowIndex: any }) => {
  emit('handleClickDelete', row, callback)
  deleteIdx.value = row.rowIndex
}

// 点击新建
const handleBulid = () => {
  emit('handleBulid')
}
</script>
<style lang="less" scoped src="./index.less"></style>
